// 自定义数据集
import React from 'react';
import { Row, Col, Button, Input, Icon, Divider, Popconfirm, message} from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';

import PubilcTablePagination from '../common/PubilcTablePagination.jsx'; // 公共table组件
import NewCustomize from './component/NewCustomize.jsx'; // 新增目录
import CustomDataEntryParameters from './component/CustomDataEntryParameters.jsx'; // 入参
import CustomDataOutputParameters from './component/CustomDataOutputParameters.jsx'; // 输出

import 'assets/css/common.css';
import './style/index.less';

export default class DataSetCustomize extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            columns: [],
            tableData: [],
            total: 0,
            page: 1,
            pageSize: 10,
            headerHeight: 0,
            loading: false
        }
    }

    componentDidMount() {
        this.getColumnsData(); // 初始化表头数据
        this.getTableData(); // 初始化列表数据
        var box = document.querySelector(".customize-header");
		if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
			this.setState({headerHeight: box.offsetHeight})
		}
    }

    // 获取表头数据
    getColumnsData = () => {
        let columns = [
            {
                title: '数据集代码',
                dataIndex: 'code',
                align: "center",
                width: '100px'
            },
            {
                title: '数据集名称',
                dataIndex: 'descripts',
                align: "center",
                width: '200px'
            },
            {
                title: '服务代码',
                dataIndex: 'serviceCode',
                align: "center",
                width: '100px'
            },
            {
                title: '是否多行数据',
                dataIndex: 'multipleRows',
                align: "center",
                width: '100px',
                render(multipleRows){
					let config = {
						'Y': '是',
						'N': '否'
					}
					return config[multipleRows];
				}
            },
			{
                title: '操作',
                key: 10,
                align: "center",
                width: 200,
                render: (text, record) => (
                    <span>
                        <Icon type="edit" style={{color: '#108EE9'}}></Icon>
                        <span className='span' onClick={() => this.handleCompile(record)}>编辑</span>
                        {/* 分割线 */}
                        <Divider type="vertical" />
                        <Icon type="delete" style={{color: 'rgba(240,65,52,1)'}}></Icon>
                        <Popconfirm title="删除不可恢复，你确定要删除吗?" onConfirm={() => this.handleDelete(record)} >
                            <span className='span' style={{color: 'rgba(240,65,52,1)'}}>删除</span>
                        </Popconfirm>
                        <Divider type="vertical" />
                        <span className='span' onClick={() => this.showChildModal(record, 'entry')}>数据集入参</span>
                        <Divider type="vertical" />
                        <span className='span' onClick={() => this.showChildModal(record, 'output')}>数据集输出</span>
                    </span>
                ),
			}
        ]
        this.setState({columns});
    }
    
    // 查询
    handleQuery = () => {
        this.setState({page: 1, pageSize: 10}, () => {
            this.getTableData();
        })
    }

    showChildModal = (record, flag) => {
        console.log(record, flag)
        if (flag === 'entry') {
            this.entryChild.showModal(record)
        } else if (flag === 'output') {
            this.outputChild.showModal(record)
        }
    }

    // 获取表格数据
    getTableData = () => {
        this.setState({loading: true})
        let {page, pageSize, listID, code, descripts, serviceCode} = this.state;
		let data = {
			params: [{
				ID: listID, // 表ID
				code, // 数据集代码
				descripts, // 数据集描述
				serviceCode, // 服务代码
			}],
			pagination: [{
				pageSize: pageSize,
				currentPage: page
			}]
		}
		$http.post('urlS', this, {
			code: "06010017",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0 && res.result) {
					for(var i = 0; i < res.result.data.length; i++) {
                        res.result.data[i].key = i;
					}
					this.setState({ tableData: res.result.data, total: res.result&&res.result.totalCount ? res.result.totalCount : 0, loading: false })
					// 数据加载成功关闭loading
					this.child.handleLoading();
				} else {
					this.setState({ tableData: [], total: 0, loading: false })
					// 数据加载失败关闭loading
					this.child.handleLoading();
				}
			},
			error: function (error) {
				this.setState({ tableData: [], total: 0, loading: false }, () => {
					// 数据加载成功关闭loading
					this.child.handleLoading();
				})
			}
		})
    }

	// 提供修改page和pageSize的回调函数
	compilePage(page, pageSize) {
		// 修改page，或者pageSize
		this.setState({ page: page, pageSize: pageSize }, () => {
			// 重新调用查询方法
			this.getTableData();
		})
	}
    
	// 调用公共组件的连接事件
	onRef = (ref) => {
		this.child = ref
    }
    
    newOnRef = (ref) => {
		this.newChild = ref
    }

    // 调用入参组件方法
    entryOnRef = (ref) => {
		this.entryChild = ref
    }

    // 调用输出组件方法
    outputOnRef = (ref) => {
		this.outputChild = ref
    }

    // 表ID
    handleListIDOnChange = e => {
        this.setState({listID: e.target.value})
    }

    // 目录代码
    handleCodeOnChange = e => {
        this.setState({code: e.target.value})
    }

    // 目录名称
    handleDescriptsOnChange = e => {
        this.setState({descripts: e.target.value})
    }

    // 服务代码
    handleServiceCodeOnChange = e => {
        this.setState({serviceCode: e.target.value})
    }

    // 新目录
    handleAdd = () => {
        let obj = {
            flag: 'add'
        }
        this.newChild.showModal(obj);
    }

    // 编辑
    handleCompile = record => {
        let obj = {
            flag: 'compile',
            userInfo: record
        }
        this.newChild.showModal(obj);
    }

    // 删除
    handleDelete = record => {
        let data = {
			params: [{
				ID: record.ID
			}]
		}
		$http.post('urlADS', this, {
			code: '06010020',
			data: data,
			success: function (res) { 
				if (+res.errorCode === 0) {
					message.success('删除成功');
                    // 刷新列表数据
                    this.getTableData();
				}
			}
		})
    }

    render() {
        let {columns, tableData, total, page, headerHeight, listID, code, descripts, serviceCode, loading} = this.state;
        // 组件所需参数
		const param = {
			// 表头配置
			columns,
			// 表格数据
			data: tableData,
			// 数据总条数
			total,
			// 当前页数
			page,
			// 表格的宽度
			y: store.getState().tableHeight.y + 78 - headerHeight,
            height: store.getState().tableHeight.y + 123 - headerHeight + 'px',
            loading
		}
        return (
            <div>
                <div className="customize-header">
                    <Row style={{ minHeight: '64px', padding: '0 24px' }}>
                        <Col span={14}>
                            表ID：<Input
                                value={listID} 
                                onChange={this.handleListIDOnChange} 
                                style={{width: '100px', margin: '23px 6px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            数据集代码：<Input
                                value={code} 
                                onChange={this.handleCodeOnChange} 
                                style={{width: '100px', margin: '23px 6px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            数据集描述：<Input 
                                value={descripts} 
                                onChange={this.handleDescriptsOnChange} 
                                style={{width: '100px', margin: '23px 6px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            服务代码：<Input 
                                value={serviceCode} 
                                onChange={this.handleServiceCodeOnChange} 
                                style={{width: '100px', margin: '23px 15px 20px 0'}} 
                                placeholder="请输入"
                                onPressEnter={this.handleQuery}
                            />
                            <Button onClick={this.handleQuery} style={{ margin: '23px 15px 20px 0', background: 'rgba(255,255,255,1)'}}>查询</Button>
                        </Col>
                        <Col span={10} style={{ textAlign: 'right' }}>
                            <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff', margin: '23px 6px 0 0'}}>新增数据集</Button>
                        </Col>
                    </Row>
                </div>
                <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
                <div style={{ padding: 24 }} className="table-body-height">
                    {/* handelThis将夫组件的属性与方法给子组件访问 */}
                    <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                </div>
                <NewCustomize onRef={this.newOnRef} handleQuery={this.getTableData} />
                <CustomDataEntryParameters onRef={this.entryOnRef} />
                <CustomDataOutputParameters onRef={this.outputOnRef} />
            </div>
        )
    }
}